<template>
	<view>
		<u-tabbar :border='false' :value="current?current:0" :fixed="true" :placeholder="true" activeColor="#0078FE"
			inactiveColor='#333333' :safeAreaInsetBottom="true" @change="handleTabClick">
			<u-tabbar-item v-for='(item,index) in tabList' :key="index" :badge='item.badge' :text="item.text">
				<image slot="inactive-icon" class="u-page__item__slot-icon" :src="item.iconPath" mode="heightFix">
				</image>
				<image slot="active-icon" class="u-page__item__slot-icon" :src="item.selectedIconPath" mode="heightFix">
				</image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props: {
			current: Number
		},
		data() {
			return {
				tabList: [{
					"iconPath": "/static/tabbar/home.png",
					"selectedIconPath": "/static/tabbar/hometh.png",
					"text": "首页",
					"pagePath": "/pages/tabbar/home"
				},
				{
					"iconPath": "/static/tabbar/classification.png",
					"selectedIconPath": "/static/tabbar/classificationth.png",
					"text": "分类",
					"pagePath": "/pages/tabbar/classification"
				},
				{
					"iconPath": "/static/tabbar/find.png",
					"selectedIconPath": "/static/tabbar/findth.png",
					"text": "发现",
					"pagePath": "/pages/tabbar/find"
				},
				{
					"iconPath": "/static/tabbar/my.png",
					"selectedIconPath": "/static/tabbar/myth.png",
					"text": "我的",
					"pagePath": "/pages/tabbar/my"
				}]
			};
		},
		methods: {
			handleTabClick(index) {
				// 使用 uni.switchTab 方法切换页面
				uni.switchTab({
					url: this.tabList[index].pagePath,
				});

			},
		}
	}
</script>

<style lang="scss">
	.u-page__item__slot-icon {
		height: 36rpx;
	}

	/deep/.u-tabbar__content__item-wrapper {
		height: 138rpx;
	}
</style>